<template>
    <div class="login-page">
        <div class="login-page-bg">
            <h1>Blog后台管理系统</h1>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item prop="userName">
                    <el-input placeholder="请输入用户名" v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" :loading="loading" @click="submit">立即登录</el-button>
                </el-form-item>
                <el-form-item>
                    <div class="tip">建议使用chrome、firefox浏览器访问 ©Copyright 2021</div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                form: {
                    userName: 'admin',
                    password: '123456'
                },
                loading: false, //按钮是否加载
                rules: {
                    userName: [{required: true, message: "请输入用户名"}],
                    password: [{required: true, message: "请输入密码"}]
                }
            }
        },
        methods: {
            submit() {
                //获取到表单对象，验证表单
                this.$refs['form'].validate(valid => {
                    if(valid) {
                        this.loading = true;
                        //执行登录操作 this.$store.dispatch(‘action方法名’,值)
                        this.$store.dispatch('login',this.form).then(() => {
                            //执行页面跳转
                            this.$router.push('/index');
                        }).catch(error => {
                            this.loading = false;
                            //弹出错误信息
                            this.$message.error(error);
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .login-page {
        height: 100%;
        background: url("../../assets/bg/login-bg6.jpg") no-repeat;
        background-size: cover;
    }
    .login-page-bg {
        position: absolute;
        top: 25%;
        left: 35%;
        right: 35%;
        bottom: 25%;
        background-color: #ffffff;
        border-radius: 5px;
        padding-top: 20px;
        text-align: center;
        color: #444444;
        padding-right: 72px;
        -webkit-box-shadow: #666 0px 0px 10px;
        -moz-box-shadow: #666 0px 0px 10px;
        box-shadow: #666 0px 0px 10px;
    }
    .login-page-bg h1 {
        padding-left: 60px;
        margin-bottom: 35px;
    }
    .tip {
        font-size: 12px;
        color: #666666;
    }
</style>